<template>
	<view>
		<!-- #ifndef H5 -->
		<ttBar title="拼好课详情" leftIcon="icon-back"></ttBar>
		<view class="cnt">
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<topOpenBar url="myGroupDetail" :id="parseInt(gpId)"></topOpenBar>
			<view class="cnt" style="padding-top: 100upx;">
				<!-- #endif -->

				<view class="goodItem">
					<view class="storeBox">
						<text class="iconfont icon-shoucangdianjia"></text>
						<text>{{goodInfo.store.name}}</text>
					</view>
					<view class="goodBox" @tap="toPage" data-url="groupDetail" :data-id="gpDt.id">
						<image :src="goodInfo.img"></image>
						<view class="infoBox">
							<text class="goodName">{{goodInfo.name}}</text>
							<view class="priceBox">
								<!-- 	<text>原价</text> -->
								<text class="price">￥{{goodInfo.price}}</text>
							</view>
							<view>
								<view class="row" v-if="gpDt.level1&&gpDt.level1==1">
									<text>{{gpDt.num1}}人团返：</text>
									<text class="fanli">￥{{gpDt.amount1}}</text>
									<text>/人</text>
								</view>
								<view class="row" v-if="gpDt.level2&&gpDt.level2==2">
									<text>{{gpDt.num2}}人团返：</text>
									<text class="fanli">￥{{gpDt.amount2}}</text>
									<text>/人</text>
								</view>
								<view class="row" v-if="gpDt.level3&&gpDt.level3==3">
									<text>{{gpDt.num3}}人团返：</text>
									<text class="fanli">￥{{gpDt.amount3}}</text>
									<text>/人</text>
								</view>
							</view>
						</view>
					</view>
				</view>

				<!-- #ifndef H5 -->

				<!-- 订单入口 -->
				<block v-if="isOrderTo">
					<!-- 团长 -->
					<block v-if="rols==0">
						<!-- 拼团失败 -->
						<block v-if="oldData.status==2">
							<view class="groupBox">
								<view class="fanliList err">
									<text>很遗憾本次开团未成功</text>
									<text>再接再厉，加油~</text>
									<text class="iconfont icon-shibaibiaoqing"></text>
									<button @tap="searchGroup">搜寻好课再次开团</button>
								</view>
							</view>
						</block>
						<!-- 拼团成功 -->
						<block v-if="oldData.status==1">
							<view class="groupBox">
								<view class="memberBox">
									<block v-if="userList.length>0">
										<image v-for="(item,index) in userList" :key="index" :src="item.pic?item.pic:'../../static/userPic.png'"></image>
									</block>
								</view>
								<view class="fanliList ing">
									<image mode="widthFix" src="../../static/icon.png"></image>
									<button @tap="searchGroup">搜寻好课再次开团</button>
								</view>
							</view>
						</block>

						<!-- 拼团中 -->
						<block v-if="oldData.status==0">
							<view class="groupBox">
								<!-- 头像列表 -->
								<view class="memberBox">
									<block v-if="userList.length<1">
										<view class="empty">?</view>
									</block>
									<block v-if="userList.length>0">
										<image v-for="(item,index) in userList" :key="index" :src="item.pic?item.pic:'../../static/userPic.png'"></image>
									</block>
								</view>
								<!-- 返利表 -->
								<view class="groupInfo">
									<view class="head">
										<text>团长奖励预估</text>
										<!-- <text class="iconfont icon-question"></text> -->
									</view>
									<view class="fanliList">
										<view class="row">
											<text>{{gpDt.num1}}人</text>
											<text class="fanli">￥{{gpDt.income1}}</text>
										</view>
										<view class="row">
											<text>{{gpDt.num2}}人</text>
											<text class="fanli">￥{{gpDt.income2}}</text>
										</view>
										<view class="row">
											<text>{{gpDt.num3}}人</text>
											<text class="fanli">￥{{gpDt.income3}}</text>
										</view>
										<!-- 倒计时 -->
										<view class="jishiBox">
											<text>仅剩</text>
											<text class="time">{{djsText}}</text>
										</view>
										<button @tap="share">邀请好友一起拼好课</button>
									</view>
								</view>

							</view>
						</block>
					</block>
					<!-- 非团长 -->
					<block v-if="rols!=0">
						<!-- 拼团失败 -->
						<block v-if="oldData.status==2">
							<view class="groupBox">
								<view class="fanliList err">
									<text>很遗憾本次开团未成功</text>
									<text>再接再厉，加油~</text>
									<text class="iconfont icon-shibaibiaoqing"></text>
									<button @tap="searchGroup">搜寻好课再次开团</button>
								</view>
							</view>
						</block>
						<!-- 拼团成功 -->
						<block v-if="oldData.status==1">
							<!-- 待开课 已开课 已完成 -->
							<block v-if="orderStatus==4||orderStatus==5||orderStatus==9">
								<view class="groupBox">
									<view class="memberBox">
										<block v-if="userList.length>0">
											<image v-for="(item,index) in userList" :key="index" :src="item.pic?item.pic:'../../static/userPic.png'"></image>
										</block>
									</view>
									<view class="fanliList ing">
										<image mode="widthFix" src="../../static/icon.png"></image>
										<button  @tap="searchGroup">搜寻好课再次开团</button>
										
									</view>
								</view>
							</block>
							<!-- 退款中 已退款 代付款 超时关闭-->
							<block v-if="orderStatus==6||orderStatus==7 ||orderStatus==3||orderStatus==8">
								<view class="groupBox">
									<view class="fanliList ing">
										<text>啊！来迟一步</text>
										<text>该拼团已被其他人捷足先登</text>
										<button @tap="searchGroup">搜寻好课再次开团</button>
									</view>
								</view>
							</block>
						</block>
						<!-- 拼团中 -->
						<block v-if="oldData.status==0">
							<!-- 代付款  待开课 已开课 已完成 -->
							<block v-if="orderStatus==3|| orderStatus==4||orderStatus==5||orderStatus==9">
								<view class="groupBox">
									<view class="memberBox">
										<block v-if="userList.length<1">
											<view class="empty">?</view>
										</block>
										<block v-if="userList.length>0">
											<image v-for="(item,index) in userList" :key="index" :src="item.pic?item.pic:'../../static/userPic.png'"></image>
										</block>
									</view>
									<view class="fanliList ing">
										<view class="jishiBox">
											<text>仅剩</text>
											<text class="time">{{djsText}}</text>
										</view>
										
										<button @tap="share">邀请好友一起拼团</button>
										<button class="hasBorder" @tap="searchGroup">搜寻好课再次开团</button>
									</view>
								</view>
							</block>
							<!-- 退款中 已退款 已关闭-->
							<block v-if="orderStatus==6||orderStatus==7 ||orderStatus==8">
								<view class="groupBox">
									<view class="fanliList ing">
										<text>啊！来迟一步</text>
										<text>该拼团已被其他人捷足先登</text>
										<button @tap="searchGroup">搜寻好课再次开团</button>
									</view>
								</view>
							</block>
						</block>

					</block>


				</block>

				<!-- 分享入口 -->
				<block v-if="!isOrderTo">
					<!-- 拼团失败 -->
					<block v-if="oldData.status==2">
						<!-- 团长/团员 -->
						<block v-if="rols!=2">
							<view class="groupBox">
								<view class="fanliList err">
									<text>很遗憾本次开团未成功</text>
									<text>再接再厉，加油~</text>
									<text class="iconfont icon-shibaibiaoqing"></text>
									<button @tap="searchGroup">搜寻好课再次开团</button>
								</view>
							</view>
						</block>
						<!-- 非参团人员 -->
						<block v-if="rols==2">
							<view class="groupBox">
								<view class="fanliList ing">
									<text>啊！来迟一步</text>
									<text>该拼团已被其他人捷足先登</text>
									<button @tap="searchGroup">搜寻好课再次开团</button>
								</view>
							</view>
						</block>

					</block>

					<!-- 拼团成功 -->
					<block v-if="oldData.status==1">
						<!-- 团长 -->
						<block v-if="rols==0">
							<view class="groupBox">
								<view class="memberBox">
									<block v-if="userList.length>0">
										<image v-for="(item,index) in userList" :key="index" :src="item.pic?item.pic:'../../static/userPic.png'"></image>
									</block>
								</view>
								<view class="groupInfo">
									<view class="head">
										<text>团长奖励预估</text>
										<!-- <text class="iconfont icon-question"></text> -->
									</view>
									<view class="fanliList">
										<view class="row">
											<text>{{gpDt.num1}}人</text>
											<text class="fanli">￥{{gpDt.income1}}</text>
										</view>
										<view class="row">
											<text>{{gpDt.num2}}人</text>
											<text class="fanli">￥{{gpDt.income2}}</text>
										</view>
										<view class="row">
											<text>{{gpDt.num3}}人</text>
											<text class="fanli">￥{{gpDt.income3}}</text>
										</view>
										<button @tap="searchGroup">搜寻好课再次开团</button>
									</view>
								</view>
							</view>

						</block>

						<!-- 团员 -->
						<block v-if="rols==1">
							<!-- 待付款 -->
							<block v-if="oldData.self.status==1||oldData.self.status==2||oldData.self.status==3">
								<view class="groupBox">
									<view class="fanliList ing">
										<text>啊！来迟一步</text>
										<text>该拼团已被其他人捷足先登</text>
										<button @tap="searchGroup">搜寻好课再次开团</button>
									</view>
								</view>
							</block>
							<!-- 待开课 已开课 已完成-->
							<block v-if="oldData.self.status==4||oldData.self.status==5 || oldData.self.status==9">
								<view class="groupBox">
									<view class="memberBox">
										<block v-if="userList.length>0">
											<image v-for="(item,index) in userList" :key="index" :src="item.pic?item.pic:'../../static/userPic.png'"></image>
										</block>
									</view>
									<view class="fanliList ing">
										<image mode="widthFix" src="../../static/icon.png"></image>
										<button @tap="searchGroup">搜寻好课再次开团</button>
									</view>
								</view>
							</block>
							<!-- 退款中 已退款  已关闭-->
							<block v-if="oldData.self.status==6||oldData.self.status==7 || oldData.self.status==8">
								<view class="groupBox">
									<view class="fanliList ing">
										<text>啊！来迟一步</text>
										<text>该拼团已被其他人捷足先登</text>
										<button @tap="searchGroup">搜寻好课再次开团</button>
									</view>
								</view>
							</block>
						</block>
						<!-- 非团员 -->
						<block v-if="rols==2">
							<view class="groupBox">
								<view class="fanliList ing">
									<text>啊！来迟一步</text>
									<text>该拼团已被其他人捷足先登</text>
									<button @tap="searchGroup">搜寻好课再次开团</button>
								</view>
							</view>
						</block>
					</block>

					<!-- 拼团中 -->
					<block v-if="oldData.status==0">
						<!-- 团长 -->
						<block v-if="rols==0">
							<view class="groupBox">
								<!-- 头像列表 -->
								<view class="memberBox">
									<block v-if="userList.length<1">
										<view class="empty">?</view>
									</block>
									<block v-if="userList.length>0">
										<image v-for="(item,index) in userList" :key="index" :src="item.pic?item.pic:'../../static/userPic.png'"></image>
									</block>
								</view>
								<!-- 返利表 -->
								<view class="groupInfo">
									<view class="head">
										<text>团长奖励预估</text>
										<!-- <text class="iconfont icon-question"></text> -->
									</view>
									<view class="fanliList">
										<view class="row">
											<text>{{gpDt.num1}}人</text>
											<text class="fanli">￥{{gpDt.income1}}</text>
										</view>
										<view class="row">
											<text>{{gpDt.num2}}人</text>
											<text class="fanli">￥{{gpDt.income2}}</text>
										</view>
										<view class="row">
											<text>{{gpDt.num3}}人</text>
											<text class="fanli">￥{{gpDt.income3}}</text>
										</view>
										<!-- 倒计时 -->
										<view class="jishiBox">
											<text>仅剩</text>
											<text class="time">{{djsText}}</text>
										</view>
										<button @tap="share">邀请好友一起拼好课</button>
									</view>
								</view>

							</view>
						</block>
						<!-- 团员 -->
						<block v-if="rols==1">
							<!-- 代付款 与 退款中-->
							<block v-if="oldData.self.status==1||oldData.self.status==2||oldData.self.status==3 ||oldData.self.status==6">
								<view class="groupBox">
									<view class="memberBox">
										<block v-if="userList.length<1">
											<view class="empty">?</view>
										</block>
										<block v-if="userList.length>0">
											<image v-for="(item,index) in userList" :key="index" :src="item.pic?item.pic:'../../static/userPic.png'"></image>
										</block>
									</view>
									<view class="fanliList ing">
										<text>已集齐{{userList.length}}人，赶快参与Ta的拼好课吧</text>
										<view class="jishiBox">
											<text>仅剩</text>
											<text class="time">{{djsText}}</text>
										</view>
										<button @tap="addGroup">立即参团</button>
									</view>
								</view>
							</block>
							<!-- 待开课 已开课 已完成-->
							<block v-if="oldData.self.status==4||oldData.self.status==5 || oldData.self.status==9">
								<view class="groupBox">
									<view class="memberBox">
										<block v-if="userList.length<1">
											<view class="empty">?</view>
										</block>
										<block v-if="userList.length>0">
											<image v-for="(item,index) in userList" :key="index" :src="item.pic?item.pic:'../../static/userPic.png'"></image>
										</block>
									</view>
									<view class="fanliList ing">
										<view class="jishiBox">
											<text>仅剩</text>
											<text class="time">{{djsText}}</text>
										</view>
										<button @tap="share">邀请好友一起拼团</button>
										<button class="hasBorder" @tap="searchGroup">搜寻好课再次开团</button>
									</view>
								</view>
							</block>
							<!-- 已退款  已关闭-->
							<block v-if="oldData.self.status==7 || oldData.self.status==8">
								<view class="groupBox">
									<view class="fanliList ing">
										<text>已集齐{{userList.length}}人，赶快参与Ta的拼好课吧</text>
										<view class="jishiBox">
											<text>仅剩</text>
											<text class="time">{{djsText}}</text>
										</view>
										<button @tap="addGroup">立即参团</button>
									</view>
								</view>
							</block>
						</block>
						<!-- 非团员 -->
						<block v-if="rols==2">
							<view class="groupBox">
								<view class="memberBox">
									<block v-if="userList.length<1">
										<view class="empty">?</view>
									</block>
									<block v-if="userList.length>0">
										<image v-for="(item,index) in userList" :key="index" :src="item.pic?item.pic:'../../static/userPic.png'"></image>
									</block>
								</view>
								<view class="fanliList ing">
									<text>已集齐{{userList.length}}人，赶快参与Ta的拼好课吧</text>

									<view class="jishiBox">
										<text>仅剩</text>
										<text class="time">{{djsText}}</text>
									</view>
									<button @tap="addGroup">立即参团</button>
								</view>
							</view>
						</block>

					</block>


				</block>

				<!-- #endif -->


				<!-- #ifdef H5 -->
				<view class="groupBox">
					<!-- 未满团 -->
					<view class="memberBox">
						<image src="../../static/userPic.png"></image>
						<image src="../../static/userPic.png"></image>
						<!-- <image src="../../static/userPic.png"></image> -->
						<view class="empty">?</view>
					</view>
					<!-- 非参团 -->
					<view class="fanliList ing">
						<!-- <text>已集齐{{userList.length}}人，赶快参与Ta的拼好课吧</text> -->
						<view class="jishiBox">
							<text>仅剩</text>
							<text class="time">{{djsText}}</text>
						</view>
						<button id="toApp"  :data-id="gpId" data-url="myGroupDetail" onclick="toApp()">立即参团</button>
					</view>

				</view>
				<!-- #endif -->

			</view>

			<view class="btnOp" @tap="toPage" :data-url="initInfo.grules">
				<text>拼团规则</text>
				<text>最少2人成团,开课前发生退款不退定金</text>
				<text class="iconfont icon-right"></text>
			</view>
			<shareAction ref="dtShare" :type="1" :id="gpId"></shareAction>
		</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapMutation,
		mapActions
	} from "vuex";
	import shareAction from "@/components/shareAction/shareAction.vue";
	import topOpenBar from "@/components/h5/topOpenBar.vue";
	export default {
		components: {
			shareAction,
			topOpenBar
		},
		computed: {
			...mapState({
				userInfo: state => state.user.userInfo,
				isLogin: state => state.user.isLogin,
				initInfo: state => state.sys.initInfo
			})
		},
		data() {
			return {
				gpId: 0,
				gpDt: {},
				userList: [],
				goodInfo: {
					store: {
						name: '店铺名称'
					}
				},
				oldData: {},
				djsText: '',
				mastFull: 0,
				rols: 3,
				koulin: '',
				isOrderTo: false,
				orderStatus: 0,
				endT:0
			};
		},
		methods: {
			getData() {
				this.$store.dispatch("apiGetMyGroupDt", {
					userId: this.isLogin ? this.userInfo.userId : 0,
					id: this.gpId,
					page_no: 1,
					page_size: 10
				}).then(res => {
					this.oldData = res.data.data;
					// #ifdef H5
					let _now=new Date();
					this.endT=_now.getTime()+(30*60*1000);
					// #endif
					this.goodInfo = res.data.data.courseGroup.course;
					this.gpDt = res.data.data.courseGroup;
					this.userList = res.data.data.userList;
					this.getMastFull();
					this.checkUser();
					setInterval(() => {
						this.daojishi();
					}, 1000)
				})
			},
			daojishi() {
				let _now = new Date();
				
				let _end= new Date(Date.parse(this.oldData.endTime.replace(/-/g, "/")));
				let _leftTime;
				
				// #ifdef H5
				_leftTime=this.endT-_now.getTime();
				// #endif
				
				// #ifndef H5
				_leftTime= _end.getTime() - _now.getTime();
				// #endif
				
				let _hour = Math.floor(_leftTime / (1000 * 60 * 60));
				let _min = Math.floor(_leftTime / (1000 * 60) % 60);
				let _sec = Math.floor(_leftTime / 1000 % 60);
				_hour = _hour > 9 ? _hour : '0' + _hour;
				_min = _min > 9 ? _min : '0' + _min;
				_sec = _sec > 9 ? _sec : '0' + _sec;
				this.djsText = _hour + ":" + _min + ":" + _sec;
			},
			// 分享
			share() {
				let _href='';
				if(this.isLogin){
					_href='pages/index/index?url=myGroupDetail&id='+this.gpId+'&uid='+this.userInfo.userId
				}else{
					_href='pages/index/index?url=myGroupDetail&id='+this.gpId
				}
				this.$refs.dtShare.setShareData({
					title:this.goodInfo.name,
					img:this.goodInfo.img?this.goodInfo.img:'http://s.de123.com/kf.png',
					href:_href,
					cntText:''
				})
				this.$refs.dtShare.open()
			},
			// 搜团
			searchGroup() {
				this.toPage({
					url: 'groupList'
				})
			},
			// 开团
			addGroup() {
				if (this.isLogin) {
					if (this.oldData.self && (this.userInfo.userId == this.oldData.self.userId) && (this.oldData.self.status == 3 ||
							this.oldData.self.status == 6)) {
						this.toPage({
							url: 'orderDt',
							id: this.oldData.self.orderNo
						})
					} else {
						let cfmArr = [this.goodInfo];
						uni.setStorage({
							key: 'confirmList',
							data: cfmArr,
							complete: () => {
								this.toPage({
									url: 'confirmOrder',
									isGroup: 2,
									acId: this.oldData.id
								})
							}
						})
					}

				} else {
					this.toPage({
						url: 'login'
					})
				}

			},
			getMastFull() {
				if (this.gpDt.level3 && this.gpDt.level3 == 3) {
					this.mastFull = this.gpDt.num3
				} else if (this.gpDt.level2 && this.gpDt.level2 == 2) {
					this.mastFull = this.gpDt.num2
				} else {
					this.mastFull = this.gpDt.num1
				}
			},
			checkUser() {
				if (this.isLogin) {
					if (this.userInfo.userId == this.oldData.userId) {
						this.rols = 0 //团长
					} else {
						let has = this.userList.some(x => {
							return this.userInfo.userId == x.userId
						})
						if (has) {
							this.rols = 1; //团员
						} else {
							this.rols = 2; //非团员
						}
					}
				} else {
					this.rols = 2;
				}

			}

		},
		onLoad(cfm) {
			this.gpId = parseInt(cfm.id);
			this.getData()
			if (cfm.stay) {
				this.isOrderTo = true;
				this.orderStatus = parseInt(cfm.stay)
			}
		},
		onShow() {
			this.getData()
		},
		onPullDownRefresh() {
			setTimeout(() => {

				this.getData()
				uni.stopPullDownRefresh();
			}, 1500)

		},
		onReachBottom() {
			this.getData()
		}
	}
</script>

<style lang="less">
	page {
		background-color: #f6f6f6;
	}

	.cnt {
		padding: 14upx 18upx;
		background-color: #f6f6f6;
		display: flex;
		flex-direction: column;
		padding-bottom: 98upx;
	}

	.btnOp {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 98upx;
		box-shadow: 0rpx 3rpx 17rpx 0rpx rgba(201, 202, 208, 0.15);
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		font-size: 32upx;
		padding: 0 30upx;

		text:first-child {
			flex-grow: 1;
			color: #202932;
		}

		text:nth-child(2) {
			font-size: 24upx;
			color: #f93d3d;
		}

		.iconfont {
			color: #999999;
		}
	}

	.groupBox {
		display: flex;
		flex-direction: column;
		padding: 30upx;
		background-color: #FFFFFF;
		border-radius: 10upx;
		box-shadow: 0rpx 3rpx 17rpx 0rpx rgba(201, 202, 208, 0.15);

		.memberBox {
			display: flex;
			padding-bottom: 30upx;
			justify-content: center;

			image {
				width: 80upx;
				height: 80upx;
				border-radius: 50%;
				margin: 0 8upx;
				flex-shrink: 0;
			}

			.circle {
				width: 80upx;
				height: 80upx;
				border-radius: 50%;
				background: linear-gradient(to bottom, #f1c66c, #f4ae5d);
				margin: 0 8upx;
				flex-shrink: 0;
			}

			.empty {
				width: 80upx;
				height: 80upx;
				border-radius: 50%;
				background-color: #fae0df;
				color: #FFFFFF;
				flex-shrink: 0;
				text-align: center;
				line-height: 80upx;
				font-size: 48upx;
				// font-weight: bold;
			}

			*:first-child {
				margin-left: 0;
			}

			*:last-child {
				margin-right: 0;
			}
		}

		.groupInfo {
			display: flex;
			flex-direction: column;

			.head {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 84upx;
				background-color: #ee3c58;
				border-radius: 8upx;
				color: #FFFFFF;

				text {
					font-size: 32upx;
				}

				.iconfont {
					margin-top: 6upx;
					font-size: 40upx;
					display: block;
					line-height: 84upx;
					margin-left: 10upx;
				}

			}
		}

		.fanliList {
			display: flex;
			flex-direction: column;
			background-color: #fff9ef;
			border-radius: 7rpx;
			padding: 0 20upx;

			.row {
				display: flex;
				padding: 20upx 0;
				border-bottom: 1px solid #f4ece0;

				text {
					width: 50%;
					text-align: center;
					color: #9e7c6b;
					font-size: 28upx;
				}

				.fanli {
					color: #ee3c58;
					font-weight: bold;
				}
			}

			.row:last-of-type {
				border: none;
			}

			.jishiBox {
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 32upx;
				padding: 30upx 0;
				color: #ee3c58;

				.time {
					height: 40upx;
					line-height: 40upx;
					display: inline-block;
					border-radius: 20upx;
					background-color: #FFFFFF;
					font-size: 28upx;
					margin-left: 20upx;
					padding: 0 30upx;
				}
			}

			button {
				height: 84upx;
				margin: 30upx 50upx;
				border-radius: 42upx;
				color: #FFFFFF;
				font-size: 36upx;
				font-weight: bold;
				line-height: 84upx;
				border: none;
				background: linear-gradient(to right, #ff7f2a, #ff5a2a);
			}

			button:after {
				border: none;
				outline: none;
			}
			.hasBorder{
				background: rgba(0,0,0,0);
				border: 1px solid #ff662a;
				color: #ff662a;
			}
		}

		.err {
			align-items: center;
			padding: 67upx 57upx;

			>text {
				font-size: 32upx;
				font-weight: bold;
				color: #9e7c6b;
				margin-bottom: 30upx;
			}

			.iconfont {
				font-size: 180upx;
				font-weight: normal;
				color: #ecdccd;
			}

			button {
				width: 100%;
			}
		}

		.ing {
			align-items: center;
			padding: 67upx 57upx;

			>text {
				font-size: 32upx;
				font-weight: bold;
				color: #9e7c6b;
				margin-bottom: 30upx;
			}

			button {
				width: 100%;
			}

			image {
				width: 70%;
				margin-bottom: 60upx;
			}
		}
	}

	.goodItem {
		display: flex;
		flex-direction: column;
		padding: 24upx;
		background-color: #FFFFFF;
		border-radius: 10upx;
		box-shadow: 0rpx 3rpx 17rpx 0rpx rgba(201, 202, 208, 0.15);
		margin-bottom: 20upx;

		.storeBox {
			display: flex;
			align-items: center;
			margin-bottom: 10upx;

			.iconfont {
				font-size: 40upx;
				color: #202932;
				margin-right: 8upx;
				font-weight: normal;
			}

			text {
				font-size: 32upx;
				color: #202932;
				font-weight: bold;
			}
		}

		.goodBox {
			display: flex;

			image {
				width: 240upx;
				height: 240upx;
				border-radius: 10upx;
				margin-right: 10upx;
				flex-shrink: 0;
			}

			.infoBox {
				flex-grow: 1;
				display: flex;
				flex-direction: column;
				background-color: #fff9ef;
				padding: 10upx 16upx;
				justify-content: space-between;
			}

			.goodName {
				font-size: 32upx;
				display: block;
				height: 40upx;
				overflow: hidden;
			}

			.priceBox {
				font-size: 30upx;
				color: #202932;
				font-weight: bold;
			}

			.row {
				font-size: 28upx;
				color: #9e7d6b;

				.fanli {
					color: #ff2626;
					font-weight: bold;
				}
			}

			.price {
				font-weight: bold;
				color: #ff2626;
			}
		}
	}
</style>
